<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绘制五星红旗</title>
	</head>
	<body>
		<canvas id="canvas" width="600px" height="400px" style="border: #00FFFF solid 0.0625rem;">
		</canvas>

		<script>
			var can = document.getElementById("canvas");
			var gct = can.getContext("2d");
			gct.beginPath();
			gct.fillStyle = "red"
			gct.fillRect(0, 0, 600, 400);
			gct.closePath();

			//绘制五角星函数
			function createStar(gct, x0, y0, r, angle) {
				gct.beginPath();
				var dig = Math.PI * 2 / 5 * 2;
				for (var i = 0; i < 5; i++) {
					var x = x0 + Math.cos(Math.PI / 2 + dig * i + angle) * r;
					var y = y0 - Math.sin(Math.PI / 2 + dig * i + angle) * r;
					gct.lineTo(x, y);
				}
				gct.closePath();
				gct.fillStyle = "yellow";
				gct.fill();
				
			}
			createStar(gct, 100, 100, 60, 0);
			createStar(gct, 200, 40, 20, Math.PI / 2 + Math.atan2(3, 5));
			createStar(gct, 240, 80, 20, Math.PI / 2 + Math.atan2(1, 7));
			createStar(gct, 240, 140, 20, Math.atan2(7, 2));
			createStar(gct, 200, 180, 20, Math.atan2(5, 4));
			
		</script>
	</body>
</html>
